<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>详情页</title>
  <link rel="stylesheet" href="static/css/reset.css">
  <link rel="stylesheet" href="static/css/common_header.css">
  <link rel="stylesheet" href="static/css/detail.css">

</head>

<body>
  <!-- 头部部分 -->
  <div class="header">
    <a href="#" class="logo">
      <img src="static/imgs/logo.png" class="logo-img" alt="">
    </a>
    <div class="header-c">
      <ul class="nav">
        <!-- 激活通过标识位来实现 -->
        <li class="nav-item active">
          <a href="#" class="item-link">首页</a>
        </li>
        <li class="nav-item">
          <a href="#" class="item-link">女装</a>
        </li>
        <li class="nav-item">
          <a href="#" class="item-link">男装</a>
        </li>
        <li class="nav-item">
          <a href="#" class="item-link">箱包</a>
        </li>
        <li class="nav-item">
          <a href="#" class="item-link">配饰</a>
        </li>
      </ul>
      <div class="search-user">
        <div class="search">
          <input type="text" class="search-input" value="搜索商品名/商品编号">
        </div>

        <div class="user-block">
          <a href="#">
            <img src="static/imgs/like.png" class="icon icon-collect" alt="">
          </a>
          <a href="#" class="margin-43">
            <img src="static/imgs/cart.png" class="icon icon-cart" alt="">
          </a>
          <a href="#">
            <img src="static/imgs/user.png" class="icon icon-user" alt="">
          </a>
        </div>
      </div>
    </div>
  </div>
  <!-- 内容部分 -->
  <div class="container">
    <div class="container-c">
      <!-- 封面图片和sku区域 -->
      <div class="cover-img-skus">
        <!-- 左边的小图片 -->
        <div class="sm-imgs-list">
          <a href="#" class="arr">
            <img class="arr-up" src="static/imgs/up.png" alt="">
          </a>
          <ul class="imgs-block">
            <li class="img-item">
              <img class="sm-img" src="static/imgs/product-sm-img.png" alt="">
            </li>
            <li class="img-item">
              <img class="sm-img" src="static/imgs/product-sm-img.png" alt="">
            </li>
            <li class="img-item">
              <img class="sm-img" src="static/imgs/product-sm-img.png" alt="">
            </li>
            <li class="img-item">
              <img class="sm-img" src="static/imgs/product-sm-img.png" alt="">
            </li>
            <li class="img-item">
              <img class="sm-img" src="static/imgs/product-sm-img.png" alt="">
            </li>
          </ul>
          <a href="#" class="arr">
            <img class="arr-down" src="static/imgs/down.png" alt="">
          </a>
        </div>
        <!-- 大图 -->
        <div class="large-img">
          <img src="static/imgs/product-large-img.jpg" alt="">
        </div>
        <!-- sku相关 -->
        <div class="skus-block">
          <p class="product-title">
            女装外套 牛仔短茄克 春季上新 牛仔外套 水洗产品【100%棉】448126
          </p>
          <!-- 价格 -->
          <p class="price">
            <span class="price-now">
              ￥399
            </span>
            <span class="price-old">
              初上市价格: ￥499
            </span>
          </p>
          <!-- 颜色和数量 -->
          <div class="color-count">
            <div class="color-block">
              <p class="title">颜色:</p>
              <div class="color-full-list">
                <span class="color-full color-pink"></span>
                <span class="color-full color-green"></span>
                <span class="color-full color-purple"></span>
                <span class="color-full color-yellow"></span>
              </div>
            </div>
            <div class="count-block">
              <p class="title">数量</p>
              <div class="input-block">
                <span class="input-btn input-btn-ins">+</span>
                <input class="input-count" type="text" value="1">
                <span class="input-btn input-btn-sub">-</span>
              </div>
            </div>
          </div>
          <!-- 尺寸 -->
          <ul class="size-list">
            <li class="size-item">
              150/74A/XS
            </li>
            <li class="size-item">
              150/74A/XS
            </li>
            <li class="size-item active">
              150/74A/XS
            </li>
            <li class="size-item">
              150/74A/XS
            </li>
            <li class="size-item margin-top-16">
              150/74A/XS
            </li>
            <li class="size-item margin-top-16">
              150/74A/XS
            </li>
            <li class="size-item margin-top-16">
              150/74A/XS
            </li>
          </ul>
          <!-- 配送服务 -->
          <div class="send-service">
            <div class="send-type">
              配送方式
              <label class="send-type-label">
                <input type="radio" checked class="send-select" name="sendSelect">
                <span class="radio-icon"></span>
                快递配送
              </label>
              <label class="send-type-label second">
                <input type="radio" class="send-select" name="sendSelect">
                <span class="radio-icon"></span>
                门店自取
              </label>
            </div>
          </div>
          <div class="describe">
            <div class="describe-l">
              支持30天无理由退换货
            </div>
            <div class="describe-r">
              <a class="describe-link1" href="">
                <img class="link1-img" src="static/imgs/like.png" alt="">
                <span class="text-like">收藏</span>
              </a>
              <a class="describe-link2" href="">
                <img class="link2-img" src="static/imgs/share.png" alt="">
                <span>分享</span>
              </a>
            </div>
          </div>
          <div class="buysell">
            <span class="buysell-buy"> 立即购买</span>
            <span class="buysell-sell"> 加入购物车</span>
          </div>
        </div>
      </div>
      <!-- 标题 -->
      <div class="goods-title">
        <ul class="goods-list">
          <li class="goods-item active">
            商品详情
          </li>
          <li class="goods-item margin-left-238">
            商品评价
          </li>
          <li class="goods-item margin-left-238">
            购买咨询
          </li>
        </ul>
      </div>
      <!-- 参数 -->
      <div class="parameter">
        <p class="cpcs">产品参数：</p>
        <div class="parameter-l">
          <ul class="parameter-list">
            <li class="parameter-item">
              产品货号:448126000
            </li>
            <li class="parameter-item">
              上市季节:2022年春季
            </li>
            <li class="parameter-item">
              商品尺码:150/76A/XS 155/80A/S 160/84A/M
              160/88A/L 165/92A/XL 170/100B/XXL
              175/108C/3XL
            </li>
          </ul>
        </div>
        <div class="parameter-r">
          <ul class="parameter-list">
            <li class="parameter-item">
              商品颜色:00白色 10水粉色 54绿色 67蓝色
            </li>
            <li class="parameter-item">
              商品材质：[面料]尼龙100%,[亲里]聚酯纤维100%,
              [填充物]聚酯纤维100%,[包边]尼龙100%
            </li>
          </ul>
        </div>
      </div>
      <!-- 产品展示 -->
      <div class="reveal">
        <p class="product-reveal">产品展示</p>
        <img class="reveal-img" src="static/imgs/product.png" alt="">
      </div>
      <!-- 商品尺寸 -->
      <div class="bit">
        <p class="product-bit">商品尺寸</p>
        <img class="bit-img" src="static/imgs/bit.png" alt="">
      </div>
      <!-- 产品细节 -->
      <div class="detail">
        <p class="product-detail">产品细节</p>
        <img class="detail-img" src="static/imgs/detail.png" alt="">
      </div>
      <!-- 商品说明 -->
      <div class="description">
        <p class="product-description">商品说明</p>
        <img class="description-img" src="static/imgs/description.png" alt="">
      </div>
      <!-- 商家简述 -->
      <div class="explanation">
        <img class="explanation-img" src="static/imgs/explanation.png" alt="">
      </div>
      <!-- 店铺推荐 -->
      <div class="recommend">
        <p class="recommend-description">店铺推荐</p>
        <div class="section">
          <ul class="container-list">
            <li class="container-item">
              <img class="cloth-img" src="static/imgs/cloth2.png" alt="">
              <p class="describe">设计师合作款·千鸟格大衣 冬季上新【羊毛】【S-XL】</p>
              <div class="buy">
                <p class="price"> ¥799</p>
                <div class="icon-block">
                  <img class="icon icon-like" src="static/imgs/like.png" alt="">
                  <img class="icon icon-shop" src="static/imgs/cart.png" alt="">
                </div>
              </div>
            </li>
            <li class="container-item margin-60">
              <img class="cloth-img" src="static/imgs/cloth2.png" alt="">
              <p class="describe">设计师合作款·千鸟格大衣 冬季上新【羊毛】【S-XL】</p>
              <div class="buy">
                <p class="price"> ¥799</p>
                <div class="icon-block">
                  <img class="icon icon-like" src="static/imgs/like.png" alt="">
                  <img class="icon icon-shop" src="static/imgs/cart.png" alt="">
                </div>
              </div>
            </li>
            <li class="container-item">
              <img class="cloth-img" src="static/imgs/cloth2.png" alt="">
              <p class="describe">设计师合作款·千鸟格大衣 冬季上新【羊毛】【S-XL】</p>
              <div class="buy">
                <p class="price"> ¥799</p>
                <div class="icon-block">
                  <img class="icon icon-like" src="static/imgs/like.png" alt="">
                  <img class="icon icon-shop" src="static/imgs/cart.png" alt="">
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>

    </div>
  </div>
  <!-- 尾部 -->

  <div class="footer">
    <div class="footer-c">
      <img src="static/imgs/logo.png" alt="" class="footer-logo">
      <ul class="footer-list">
        <li class="footer-item">
          <a href="" class="item-link">门店咨询</a>
        </li>
        <li class="footer-split">|</li>
        <li class="footer-item">
          <a href="#" class="item-link">网络购物FAQ</a>
        </li>
        <li class="footer-split">|</li>
        <li class="footer-item">
          <a href="#" class="item-link">关于BALANCE</a>
        </li>
        <li class="footer-split">|</li>
        <li class="footer-item">
          <a href="#" class="item-link">电子报订阅</a>
        </li>
        <li class="footer-split">|</li>
        <li class="footer-item">
          <a href="" class="item-link">买卖定型化契约</a>
        </li>
        <li class="footer-split">|</li>
        <li class="footer-item">
          <a href="" class="item-link">政府政令宣传</a>
        </li>
        <p class="last">Copyright © BALANCE Ltd. All rights reserved</p>
      </ul>
      <div class="footer-code">
        <img class="code code-1" src="static/imgs/code1.png" alt="">
        <img class="code code-2" src="static/imgs/code2.png" alt="">
      </div>
    </div>
  </div>
</body>

</html>